<!-- 聊天区 -->
<template>
  <div class='window ChatWindow'>
    <div class=" chatContentP">
      <div class="tipTitle" v-show="switchContactsInfo.receiverUserName">
        沟通职位<el-link :underline="false" type="primary" @click="enterDetailsPage(contactsInfo)">
          {{contactsInfo.jobName || '暂无'}}</el-link>
        &nbsp;{{contactsInfo.wage || '暂无'}}
        &nbsp;{{contactsInfo.areaLast || '暂无'}}
      </div>
      <el-scrollbar>
        <div class="chat-main chatContent" id="new_message" style="height: 360px;" v-if="zpData.length>0">
          <ul>
            <transition-group>
              <li class="chat-mine" v-for="(chatItem,index) in zpData" :key="index+'q'" v-if="chatItem.uncount == 0">
                <div class="chat-user">
                  <img src="../../../../assets/img/avatar.png">
                  <cite><i>{{chatItem.updateTime}}</i>{{chatItem.senderUserId == userId ? chatItem.senderUserName: chatItem.receiverUserName || '暂无'}}</cite>
                </div>
                <div class="chat-text">{{chatItem.content}}</div>
                <div class="chat-text-status">
                  <span v-if="!chatItem.msgStatus || chatItem.msgStatus == 0" ref="msgStatusReady">已发送</span>
                  <span v-else>已读</span>
                </div>
              </li>
              <li v-else-if="chatItem.uncount == 1" :key="index+'q'">
                <div class="chat-user">
                  <img src="../../../../assets/img/exp.png">
                  <cite>{{chatItem.senderUserId == userId ? chatItem.receiverUserName: chatItem.senderUserName || '暂无'}}<i>{{chatItem.updateTime}}</i></cite>
                </div>
                <div class="chat-text">{{chatItem.content}}</div>

                <div class="chat-text-status" v-if="chatItem.msgType == 1">
                  <el-button type="primary" :disabled="chatItem.isCheck == 1" size="small"
                    @click="insertresumeDeliver(chatItem.id, index)">同意</el-button>
                  <el-button type="danger" :disabled="chatItem.isCheck == 1" size="small"
                    @click="updateResumeDeliver(chatItem.id, index)">拒绝</el-button>
                </div>
              </li>
              <li v-else-if="chatItem.uncount == 2" class="item-system" :key="index+'q'">
                <div class="text"><span>{{chatItem.content}}</span>
                </div>
              </li>
            </transition-group>
          </ul>
        </div>
        <div class="noContacts" v-else>
          <h6>还未与任何HR进行过沟通</h6>
        </div>
      </el-scrollbar>
    </div>
    <!-- 底部 -->
    <div class="chat-footer">
      <div class="unselect chat-tool">
        <!-- <el-popover placement="top" title="常用语" width="200" trigger="click">
          <el-scrollbar>
            <div class="commonWords">
              <p>常用语常用语常用语常用语常用…常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
              <p>常用语常用语常用语常用语常用…</p>
            </div>
          </el-scrollbar>
          <span class="icon tool-face words" slot="reference">
            <img src="../../../../assets/img/words.png" alt="">
            表情
          </span>
        </el-popover> -->
        <el-popover placement="top" title="常用语" width="200" trigger="click" v-model="visible">
          <el-scrollbar>
            <div class="commonWords">
              <p v-for="(item,index) in wordsLists" :key="index" :class="{ commonWordClass: index== wordsIndex }"
                @click="words(item.content, index)">
                {{item.content}}</p>
            </div>
          </el-scrollbar>
          <span class="icon tool-face words" slot="reference">
            <img src="../../../../assets/img/words.png" alt="">
            常用语
          </span>
        </el-popover>

        <el-popover placement="top" title="表情" width="500" trigger="click" v-model="Emots">
          <Emotion ref="EmotionB" @AppendInputValue="AppendMessageText"></Emotion>
          <!-- <span class="icon tool-audio" title="发送网络音频" @click="OpenEmotions" data-type="audio"></span> -->
          <!-- <span class="icon tool-face words" slot="reference" @click="OpenEmotions">
            <img src="../../../../assets/img/words.png" alt="">
            表情
          </span> -->
        </el-popover>

        <!-- <span class="icon tool-image" title="上传图片" event="image" @click="OpenEmotions()">
          <input type="file" name="file">
        </span> -->
        <!-- <span class="icon tool-image" title="发送文件" event="image" data-type="file">
          <input type="file" name="file">
        </span> -->
        <!-- <span class="icon tool-audio" title="发送网络音频" @click="OpenEmotions" data-type="audio"></span> -->
        <!-- <span class="icon tool-video" title="发送网络视频" event="media" data-type="video"></span> -->
        <!-- <span class="icon tool-code" title="代码" event="extend" lay-filter="code"></span> -->
        <!-- <span class="tool-log" event="chatLog"><i class="icon"></i>聊天记录</span> -->
      </div>
      <div class="chat-textarea">
        <!-- <p class="chat-first-Conversation" v-show="contactsInfo.isShowResumeContact == 0">与HR沟通需要将您的简历发送给HR &nbsp;
          <el-link type="primary" :underline="false" @click="contactChatId()">发送简历</el-link>
        </p> -->
        <textarea v-model="message" id="message" @focus="someThing"></textarea>
        <!-- :disabled="contactsInfo.isShowResumeContact == 0" -->

      </div>
      <div class="chat-bottom">
        <div class="chat-send">
          <!-- <span class="send-close" event="closeThisChat">关闭</span> -->
          <!-- <span class="send-btn" event="send">发送</span> -->
          <span>按Enter键发送，按Cnt+Enter键换行</span>
          <el-button type="primary" @click="sendMessage" @keyup.enter="sendMessages" class="send-btn" v-if="message!=''"
            :disabled="!switchContactsInfo.receiverUserName">
            发送
            <i class="el-icon-position el-icon--right"></i>
          </el-button>

          <!-- 禁止发送状态 -->
          <el-popover v-else placement="top" width="50" trigger="click" content="不能发送空白信息">
            <el-button type="primary" slot="reference">发送
              <i class="el-icon-position el-icon--right"></i></el-button>
          </el-popover>
          <!-- <span class="send-set" event="setSend" lay-type="show">
            <em class="edge"></em>
          </span> -->
          <ul class="anim menu-box">
            <li class="this" event="setSend" lay-type="Enter"><i class="icon"></i>按Enter键发送消息</li>
            <li event="setSend" lay-type="Ctrl+Enter"><i class="icon"></i>按Ctrl+Enter键发送消息</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import { listMessage, contactChatId, wordsList } from '@/api/chat'
import Emotion from './emot'
import bus from '@/components/common/bus';
export default {
  components: {
    Emotion
  },
  data () {
    return {
      count: 1,

      zpData: [],
      // 对话文字
      message: '',
      // 常用语索引
      wordsIndex: -1,
      visible: false,
      Emots: false,
      // socket:
      stompClient: '',
      chatId: '', // 聊天id
      contactsInfo: {}, // 联系人信息
      // 检测是否已连接
      connectFalse: false,
      userId: localStorage.getItem('ps_userId'),
      // 常用语
      wordsLists: [],
      isCheck: false,
      // 禁用按钮索引
      disablesIndex: 0,
      VUE_APP_URL: process.env.VUE_APP_URL
    };
  },
  props: {
    switchContactsInfo: {
      type: Object | String,
      default: () => {
        return {}
      }
    }
  },
  computed: {},
  watch: {
    switchContactsInfo: {
      handler (newName, oldName) {
        this.contactsInfo = newName
        this.contactsInfo.areaLast = newName.area.split('-')[newName.area.split('-').length - 1]

        if (this.chatId != newName.chatId) {
          this.zpData = []
          this.connect(newName)
        }
      },
      deep: true
    },
    zpData: {
      handler (newName) {
        this.$nextTick(() => {
          var container = document.getElementById("new_message");
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        })
      },
      deep: true
    }
  },
  methods: {
    sendMessage () {
      if (!this.message.trim()) {
        this.$message.error('请输入聊天内容');
        this.message = ''
        return false
      }

      if (!this.contactsInfo.receiverUserId) {
        this.$message.error('请选择联系人')
        return false
      }
      this.$nextTick(() => {
        if (message) {
          var chatMessage = {
            chatId: this.chatId,
            senderUserId: this.contactsInfo.senderUserId, // '2', //我自己
            senderUserName: this.contactsInfo.senderUserName,
            senderUserAccountType: this.contactsInfo.senderUserAccountType,
            receiverUserId: this.contactsInfo.receiverUserId, // '1', // 对方
            receiverUserName: this.contactsInfo.receiverUserName,
            receiverUserAccountType: this.contactsInfo.receiverUserAccountType,
            content: this.message,
            operationType: 3
          };
          this.stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));

          this.message = ''
          console.log('发送成功')
        }
      })
    },
    // 
    sendMessages () {
      document.onkeydown = e => {
        let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13 && e.ctrlKey && e.target.baseURI.match(/chat/) && e.target.localName === 'textarea') {
          if (this.message) {
            // console.log(this.message.replace(/\n/g, '<\r>'))
            // return this.message.replace(/\n/g, '<\r>')
            this.message = this.message + '\n'
            this.$nextTick(() => {
              var container = this.$el.querySelector("#message");
              container.scrollTop = container.scrollHeight;
            })
          }
        } else if ((e.keyCode === 13 && e.target.baseURI.match(/chat/) && e.target.localName === 'textarea')) {
          this.sendMessage()
        }
      }
    },
    // 常用语索引
    words (item, index) {
      // if (this.contactsInfo.isShowResumeContact == 0) {
      //   this.$message.warning('与HR沟通需要将您的简历发送给HR')
      //   return false
      // }
      this.wordsIndex = index
      this.visible = !this.visible
      this.message = item
      this.sendMessage()
    },
    connect (newVal) {

      let that = this
      if (that.stompClient) {
        // 如果切换 联系人 关闭上个联系人的长链接
        that.stompClient.disconnect(res => {
          console.log(res, '中断连接')
        })
      }
      let formData = new FormData()
      that.chatId = newVal.chatId;
      formData.append('chatId', newVal.chatId)
      listMessage(formData).then(res => {
        if (res.success) {
          let data = res.data;
          if (data != null) {
            if (data.length > 0) {
              data.map(item => {
                if (item.senderUserAccountType === 1) {
                  item.uncount = 0
                } else {
                  item.uncount = 1
                }
                if (item.msgType == 2) {
                  item.uncount = 2
                }
              });
              that.zpData = data
            }
          }
          let socket = new SockJS(`${this.VUE_APP_URL}/zsrencai/ws/socket`);
          that.stompClient = Stomp.over(socket);

          that.stompClient.connect({}, () => {
            // 订阅路径
            let url = ''
            if (newVal.senderUserId == that.userId) {
              url = newVal.senderUrl
            } else {
              url = newVal.receiverUrl
            }
            that.stompClient.subscribe(url, (res) => {
              that.onMessageReceived(res)
            });

            // 组装参数
            let joinMessage = {
              // 发送人
              senderUserId: newVal.senderUserId,
              // 接收人
              receiverUserId: newVal.receiverUserId,
              // 类型
              operationType: 1
            };

            let params = JSON.stringify(joinMessage);
            that.stompClient.send("/app/chat.addUser", {}, params)
          });
        }
      }).catch(err => {
        that.onError()
      })
    },
    // 链接失败
    onError (error) {
      this.$message.error('无法连接到WebSocket服务器。请刷新此页再试一次！')
    },
    // 回显示据
    onMessageReceived (payload) {
      let message = JSON.parse(payload.body);
      if (message.operationType === 1) {
        console.log('加入新的聊天了')
        // message.content = message.sender + ' joined!';
      } else if (message.operationType === 2) {
      } else if (message.operationType === 3) {
        if (!message.chatId) return
        // 如果聊天ID不一致，那就说明不是一个对话窗口，聊天消息不展示，但是聊天数量要是站姿啊左侧联系人列表
        bus.$emit('uncount', message);
        if (this.chatId != message.chatId) return
        let ps_userId = this.userId
        if (message.senderUserAccountType === 1) {
          message.uncount = 0
        } else {
          message.uncount = 1
        }
        if (message.msgType == 2) {
          message.uncount = 2
        }
        this.zpData.push(message)
        // console.log(this.zpData, 'message')
        // this.$nextTick(() => {
        //   var container = this.$el.querySelector("#new_message");
        //   container.scrollTop = container.scrollHeight;
        // })
        // message.content = message.sender + ' left!';
      } else if (message.operationType === 4) {
        // 拒绝投递  禁用按钮
        this.zpData[this.disablesIndex].isCheck = 1
        // 同时联系人列表 角标清0
        bus.$emit('focusEvents', this.contactsInfo);
        this.zpData.push({
          uncount: 2,
          content: message.content
        })
        // 同意投递 禁用按钮
      } else if (message.operationType === 5) {
        // this.isCheck = true
        this.zpData[this.disablesIndex].isCheck = 1
        // 同时联系人列表 角标清0
        bus.$emit('focusEvents', this.contactsInfo);
        this.zpData.push({
          uncount: 2,
          content: message.content
        })
      } else if (message.operationType === 6) {
      } else if (message.operationType === 7) {
        // alert('message.operationType为 7')
        if (message.msgStatus === 1) {
          this.zpData.map(res => {
            res.msgStatus = 1
          })
        }
      }
    },
    // 获取焦点事件
    someThing () {
      bus.$emit('focusEvents', this.contactsInfo);
      let obj = {
        chatId: this.contactsInfo.chatId,
        receiverUserId: this.contactsInfo.receiverUserId,
        senderUserId: this.contactsInfo.senderUserId,
        operationType: 7
      };
      this.stompClient.send('/app/chat.updateMessageStatus', {}, JSON.stringify(obj));
    },
    // 初次聊天发送简历
    contactChatId () {
      let obj = {
        "senderUserId": this.contactsInfo.senderUserId,
        "receiverUserId": this.contactsInfo.receiverUserId,
        "chatId": this.chatId,
        "operationType": 6
      }
      this.stompClient.send("/app/chat.updateShowResumeContact", {}, JSON.stringify(obj));
      this.contactsInfo.isShowResumeContact = 1

    },
    // 进入主站中的职位详情页
    enterDetailsPage (item) {
      window.open(this.VUE_APP_URL + '/#/JobHunting/jobdetail?id=' + item.jobId, '_blank')
    },
    // 常用于列表
    wordLists () {
      wordsList().then(res => {
        if (res.success) {
          this.wordsLists = res.data
        }
      })
    },
    // 同意
    insertresumeDeliver (id, index) {
      let obj = {
        "chatId": this.chatId,
        "jobName": this.contactsInfo.jobName,
        "jobId": this.contactsInfo.jobId,
        "resumeId": this.contactsInfo.resumeId,
        "senderUserName": this.contactsInfo.senderUserName,
        "senderUserId": this.contactsInfo.senderUserId,
        "receiverUserId": this.contactsInfo.receiverUserId,
        "receiverUserName": this.contactsInfo.receiverUserName,
        "messageId": id,
        "operationType": 4
      }
      this.disablesIndex = index
      this.stompClient.send("/app/chat.insertResumeDeliver", {}, JSON.stringify(obj));
    },
    // 拒绝
    updateResumeDeliver (id, index) {
      let obj = {
        "chatId": this.chatId,
        "jobName": this.contactsInfo.jobName,
        "jobId": this.contactsInfo.jobId,
        "resumeId": this.contactsInfo.resumeId,
        "senderUserName": this.contactsInfo.senderUserName,
        "senderUserId": this.contactsInfo.senderUserId,
        "receiverUserId": this.contactsInfo.receiverUserId,
        "receiverUserName": this.contactsInfo.receiverUserName,
        "messageId": id,
        "operationType": 5
      }
      this.disablesIndex = index
      this.stompClient.send("/app/chat.updateResumeDeliver", {}, JSON.stringify(obj));
    },
    // 打开表情包弹框
    OpenEmotions () {
      this.$refs.EmotionB.OpenEmotion(true);
      this.Emots != this.Emots
    },
    //表情选中后追加在input
    AppendMessageText (EmotionChinese, i) {
      // this.ArticleCommentText += EmotionChinese;
      this.Emots = false
      this.message += '<p><img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' + i + '.gif"><p>'
      // <img : src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' + EmotionChinese + '.gif'>

    }
  },
  created () {
    // this.stompSocket()
    this.wordLists()

  },
  mounted () {
    this.sendMessages()
  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.ChatWindow {
    height: 390px;
    width: calc(100% - 1px);
    /* border: 1px solid rgba(232, 232, 232, 1); */
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #e5e5e5;
    /* background: palegoldenrod; */
}
.chatContentP {
    width: 100%;
    height: 410px;
    /* border-right: 1px solid rgba(232, 232, 232, 1); */
    /* border-bottom: 1px solid rgba(232, 232, 232, 1); */
}
.chatContent {
    height: 220px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-bottom: none;
}
.tipTitle {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    background: rgba(249, 244, 242, 1);
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: rgba(117, 117, 117, 1);
    text-indent: 25px;
}
.tipTitle /deep/ .el-link--inner {
    text-indent: 5px;
}
.noContacts {
    height: 100%;
    text-align: center;
    height: 350px;
    /* line-height: 593px; */
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 200;
    color: rgba(153, 153, 153, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(232, 232, 232, 1);
}

/* 聊天内容样式 */
.chat-main {
    height: 262px;
    padding: 15px 15px 5px;
    overflow-x: hidden;
    overflow-y: auto;
}
.chat-main ul .chat-mine {
    text-align: right;
    padding-left: 0;
    padding-right: 60px;
}
.chat-main ul li {
    position: relative;
    font-size: 0;
    margin-bottom: 10px;
    padding-left: 60px;
    min-height: 68px;
}
.chat-mine .chat-user {
    left: auto;
    right: 3px;
}
.chat-user {
    position: absolute;
    left: 3px;
}
.chat-text,
.chat-user {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.chat-user img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.chat-text-status {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 22px;
    margin-top: 5px;
    color: rgba(153, 153, 153, 1);
}
.chat-text-status_yd {
    color: #b1deff;
}
.chat-text-status_wd {
    color: #78b7ed;
}
.chat-mine .chat-user cite {
    left: auto;
    right: 60px;
    text-align: right;
}
.chat-user cite {
    position: absolute;
    left: 60px;
    top: -2px;
    width: 500px;
    line-height: 24px;
    font-size: 12px;
    white-space: nowrap;
    color: #999;
    text-align: left;
    font-style: normal;
}
.chat-mine .chat-user cite i {
    padding-left: 0;
    padding-right: 15px;
}
.chat-user cite i {
    padding-left: 15px;
    font-style: normal;
}
.chat-mine .chat-text {
    margin-left: 0;
    text-align: left;
    background-color: #5fb878;
    color: #fff;
}
.chat-text {
    position: relative;
    line-height: 22px;
    margin-top: 25px;
    padding: 8px 15px;
    background-color: #b1deff;
    border-radius: 3px;
    color: #333;
    word-break: break-all;
    max-width: 462px\9;
}
.chat-text,
.chat-user {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.chat-mine .chat-text:after {
    left: auto;
    right: -10px;
    border-top-color: #5fb878;
}
.chat-text:after {
    content: '';
    position: absolute;
    left: -10px;
    top: 13px;
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-color: #b1deff transparent transparent;
    overflow: hidden;
    border-width: 10px;
}

.chat-footer {
    border: 1px solid #f1f1f1;
    border-bottom: none;
}
.chat-tool {
    position: relative;
    padding: 0 8px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0;
}
.chat-tool span {
    position: relative;
    margin: 0 10px;
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    cursor: pointer;
}
.el-popover__title {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
}
.commonWords {
    max-height: 225px;
    border-top: 1px solid rgba(232, 232, 232, 1);
}
.commonWords p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    line-height: 40px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
}

.commonWords p:hover {
    background: rgba(242, 247, 249, 1);
}

.commonWordClass {
    background: rgba(242, 247, 249, 1);
}

.icon {
    font-family: icon !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.chat-tool .tool-log {
    position: absolute;
    right: 5px;
    font-size: 14px;
}
.tool-log i {
    position: relative;
    top: 2px;
    margin-right: 5px;
    font-size: 20px;
    color: #999;
}
.chat-tool span {
    position: relative;
    margin: 0 10px;
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    cursor: pointer;
}
.chat-tool .words {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
}
.chat-tool .words img {
    vertical-align: middle;
    margin-right: 5px;
}
.chat-textarea {
    margin-left: 10px;
    position: relative;
}
.chat-first-Conversation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
}
.chat-textarea textarea {
    display: block;
    width: calc(100% - 20px);
    padding: 3px 10px;
    height: 68px;
    line-height: 20px;
    border: none;
    overflow: auto;
    resize: none;
    background: 0 0;
    outline: none;
    font-size: 18px;
}
.chat-bottom {
    position: relative;
    height: 46px;
}
.chat-send {
    position: absolute;
    right: 15px;
    top: -10px;
    height: 32px;
    line-height: 32px;
    font-size: 0;
    cursor: pointer;
}
.chat-send span {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    margin-left: 5px;
    padding: 0 20px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
    border-radius: 3px;
}
.chat-send .send-btn {
    width: 80px;
    /* border-radius: 3px 0 0 3px; */
}
.chat-send .send-set {
    position: relative;
    width: 30px;
    height: 32px;
    margin-left: 0;
    padding: 0;
    border-left: 1px solid #85c998;
    border-radius: 0 3px 3px 0;
}
.chat-send .menu-box {
    left: auto;
    right: 0;
    top: 33px;
    width: 180px;
    padding: 10px 0;
}
.menu-box {
    display: none;
    position: absolute;
    z-index: 100;
    top: 24px;
    left: -31px;
    padding: 5px 0;
    width: 85px;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
}
.anim {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.chat-send .menu-box li {
    padding-right: 15px;
    line-height: 28px;
}
.menu-box li {
    position: relative;
    line-height: 22px;
    padding-left: 30px;
    font-size: 12px;
}
.menu-box .this i {
    display: block;
}
.menu-box li i {
    display: none;
    position: absolute;
    left: 8px;
    top: 0;
    font-weight: 700;
    color: #5fb878;
}

.item-system {
    text-align: center;
    min-height: 24px !important;
}
.item-system .text {
    font-size: 12px;
    line-height: 24px;
    padding: 1px 15px 0;
    color: #61687c;
    border-radius: 15px;
    vertical-align: top;
    word-break: break-all;
    /* margin-top: 30px; */
    font-size: 12px;
    display: inline-block;
    background-color: #f2f5fa;
}

.v-enter,
.v-leave-to {
    opacity: 0.3;
    transform: translateY(5px);
}

.v-enter-active,
.v-leave-to {
    transition: all 0.3s;
}
</style>